<template>
    <div id="contact">
        <h1 class="lianxi">联系我们</h1>
        <div class="bottom">
            <div class="info">
                <p class="info-tel">电话：4000565758</p>
                <p class="info-mail">邮箱：moni@moni.cn</p>
                <p class="info-net">网址：www.moni.cn</p>
                <p class="info-qq">Q Q:130444222</p>
            </div>
            <div class="ma">
                <div class="text">
                    <div>微信公众号：墨泥学车</div>
                    <div>（扫描二维码，关注墨泥学车）</div>
                </div>
                <div class="erweima">
                    <img src="../assets/image/contact/wx.jpg" alt="">
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import Footer from '../components/footer'
export default {
    name:"contact",
    components:{
        Footer:Footer
    }
}
</script>

<style>
#contact{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url("../assets/image/contact/relate.jpg");
    z-index: -1;
    background-size:cover;
    color: white;
}
.lianxi{
    position: absolute;
    top: 50%;
    left:13vw;
}
/* .info{
    position: absolute;
    bottom: 3rem;
    left: 10rem;
} */
.info p{
    margin-top: 0.5rem;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
}
/* .info-tel::before{
    content: '';
    background: url("../");
} */
.ma{
    padding: 1rem;
    background-color:rgba(24, 64, 76, 0.6);
    display: flex;
    justify-content: space-between;
}
.erweima img{
    width: 7rem;
    /* height: 3rem; */
}
.text{
    width: 70%;
    text-align: left;
   
}
.text div{
    margin-top: 1rem;
}
.bottom{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    bottom: 3rem;
    justify-content: space-around;
}

.info-tel::before{
    content:"";
    background: url("../assets/image/contact/phone.png");
    background-size: cover;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: sub;
    display: inline-block;
}
.info-mail::before{
    content:"";
    background: url("../assets/image/contact/mail.png");
    background-size: cover;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: sub;
    display: inline-block;
}
.info-net::before{
    content:"";
    background: url("../assets/image/contact/address.png");
    background-size: cover;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: sub;
    display: inline-block;
}
.info-qq::before{
    content:"";
    background: url("../assets/image/contact/QQ.png");
    background-size: cover;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: sub;
    display: inline-block;
}
</style>

